<template>
  <div id='divId' :style="{height: '450px',width: tableWidth}">
    <el-form :inline='true'>
      <el-form-item label='年份选择'>
        <el-select v-model='value' placeholder ='请选择' @change='selectTime'>
          <el-option
            v-for='item in years'
            :key='item.value'
            :label='item.lable'
            :value='item.value'>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label='备案状态选择' >
        <el-select v-model='value1' placeholder='请选择' @change='selectState'>
          <el-option
            v-for='item in states'
            :key='item.value'
            :label='item.lable'
            :value='item.value'>
          </el-option>
        </el-select>
      </el-form-item>

      <el-button type='primary' v-on:click='applyDownload'>数据导出</el-button>
    </el-form>
    <!-- 对应弹框FullConActivityWindow -->
    <div>
      <el-dialog :visible.sync='windowVisible' append-to-body :close-on-click-modal='false'>
        <FullConActivityWindow
          v-if='windowVisible'
          ref='popWindow'
          v-on:closeWindow='closeWindow'
          v-on:updateWindow='updateWindow'></FullConActivityWindow>
      </el-dialog>
    </div>

    <el-row>
      <el-col :span='24'>
        <el-table
          :data='tableData.slice((pageNo-1)*page_size,pageNo*page_size)'
          size='mini'
          style='width: 100%'
          max-height='450'
          header-cell-class-name='table-header-gray'
          v-loading='isShowloading'
          border='1px solid gray'>
          <el-table-column type='index' align='center' label='序号' width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='recordNumber' align='center' label='备案编号' width='120' show-overflow-tooltip></el-table-column>
          <el-table-column prop='recordState' align='center' label='备案状态' width='120' show-overflow-tooltip></el-table-column>
          <el-table-column prop='projectId' align='center' label='项目编号' width='120' show-overflow-tooltip></el-table-column>
          <el-table-column prop='projectName' align='center' label='项目名称' width='150' show-overflow-tooltip></el-table-column>
          <el-table-column prop='customName' align='center' label='业主名称' width='150' show-overflow-tooltip></el-table-column>
          <el-table-column prop='contractGetDate' align='center' label='合同签约日期'  width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='contractAmount' align='center' label='合同金额（元）' width='120' show-overflow-tooltip ></el-table-column>
          <el-table-column prop='projectType' align='center' label='项目类型' width='100' show-overflow-tooltip ></el-table-column>
          <el-table-column prop='projectManager' align='center' label='项目经理' width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='projectArea' align='center' label='项目区域' width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='recordTime' align='center' label='备案时间' width='100' show-overflow-tooltip></el-table-column>
          <el-table-column label='操作' align='center' fixed='right' width='100'>
            <template slot-scope='scope'>
              <el-button type='text' @click='handleEdit(scope.$index, scope.row)' icon='el-icon-edit' size='mini'>编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type='flex' justify='end' style='margin-top: 10px'>
          <el-pagination
            background
            @size-change='handleSizeChange'
            @current-change='handleCurrentChange'
            :current-page='pageNo'
            :page-size='page_size'
            :page-sizes='[10, 20, 30]'
            layout='total, prev, pager, next, sizes'
            :total='total'></el-pagination>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FullConActivityWindow from '@/components/views/FullConActivityWindow';
import { InvitationStatisticsTable } from '@/api/bigdata.js';
import { baseUrl } from '../../core/config/development';
export default {
  components: {
    FullConActivityWindow
  },
  data () {
    return {
      tableWidth: '',
      screenWidth: document.documentElement.clientWidth, // 屏幕宽度
      windowVisible: false,
      addOperate: undefined,
      tableData: [],
      years: [],
      states: [{
        value: '全部',
        lable: '全部'
      },
      {
        value: '已备案',
        lable: '已备案'
      },
      {
        value: '未备案',
        lable: '未备案'
      }],
      value: '',
      value1: '全部',
      total: 0,
      page_size: 10,
      pageNo: 1,
      isShowloading: false,
      year: '',
      state: '全部'
    };
  },
  watch: {
    'screenWidth': function (val) { // 监听屏幕宽度变化
      this.tableWidth = (Number(val) - 620) + 'px';
    }
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus();
      }
    }
  },
  mounted: function () {
    this.tableWidth = this.screenWidth - 620 + 'px'
    var _this = this;
    window.onresize = function () { // 定义窗口大小变更通知事件
      _this.screenWidth = document.documentElement.clientWidth; // 窗口宽度
    };
    this.loadYears();
    this.loadTableData();
  },
  methods: {
    applyDownload () {
      var state = this.state;
      var year = this.year;
      var url = baseUrl + 'apiExcel/getAdFullConsulExcel?year=' + year + '&state=' + state;
      // var url ='http://'+document.location.host+'/api/excel'
      window.location.href = url;
    },
    loadYears () {
      let currentYear = new Date().getFullYear();
      this.value = currentYear;
      this.year = currentYear;
      this.years = [];
      this.years.push({value: '全部', lable: '全部'});
      for (let i = 0; i < 11; i++) {
        this.years.push({value: (currentYear - i), label: (currentYear - i) + '年'});
      }
    },
    // 年份选择
    selectTime (data) {
      this.year = data;
      this.loadTableData();
    },
    // 备案状态选择
    selectState (value) {
      this.state = value;
      this.loadTableData()
    },
    /**
     * 获取表格数据
     */
    loadTableData () {
      let params = {
        size: this.page_size,
        current: this.pageNo,
        year: this.year,
        state: this.state
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.listFullConsult(this, params).then(res => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 分页导航
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadTableData()
    },
    handleSizeChange (val) {
      this.page_size = val
      this.loadTableData()
    },
    currentChange (val) {
      this.pageNo = val
      this.loadTableData()
    },
    // 编辑
    handleEdit (index, row) {
      this.windowVisible = true;
      this.addOperate = false;
      this.$nextTick(() => {
        let copy = Object.assign({}, row); // row是所编辑本行内数据对象
        this.$refs.popWindow.dataInit(copy);
        // this.$refs.popWindow.dataInit(row);
      });
    },
    closeWindow () {
      this.windowVisible = false;
    },
    updateWindow () {
      this.windowVisible = false;
      this.loadTableData()
    },
    onSubmit () {
      window.alert('导出excel表格');
    }
  }
};
</script>

<style scoped>
.el-form-item{
    margin-right: 20px;
}
</style>
